<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火游游戏商城</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/banner.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>
<body>
<nav class="navbar navbar-expand-md bg-black navbar-black">
    <div class="container">
        <a href="#" class="navbar-brand text-light"><i class="bi bi-fire"></i></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"data-bs-target="#navmenu">
            <span class="navbar-toggler-icon text-light"></span>
        </button>

        <div class="collapse navbar-collapse" id="navmenu">
            <ul class="navbar-nav mr-auto align-items-center">
                <form action="http://localhost:9300/game/search" method="get">
                <input type="text" name="key" class="form-control bg-black border-0 font-weight-bold text-light" id="search-input" placeholder="Search...">  </input>
                    <button type="submit" class="btn btn-black text-light"><i class="bi bi-search"></i></button>


                </form>
            </ul>
            <ul class="navbar-nav ms-auto">


                <li class="nav-item" th:if="${session.loginUser!=null}"><div class="nav-link"><a href="#" class="navbar-brand text-light"><i class="bi bi-robot"></i>欢迎！[[${session.loginUser.nickname}]]</a></div></li>
                <li class="nav-item" th:if="${session.loginUser!=null}"><div class="nav-link"><img  style="width: 30px;height: 30px"  th:src="${session.loginUser.header}"></div></li>
                <li class="nav-item" th:if="${session.loginUser!=null}"><div class="nav-link"><a href="http://localhost:9100/quit" class="navbar-brand text-light"><i class="bi bi-door-open"></i>退出</a></div></li>
                <li class="nav-item" th:if="${session.loginUser!=null}"><div class="nav-link"><a href="http://localhost:9200/tomygame" class="navbar-brand text-light"><i class="bi bi-cart"></i>我的游戏库</a></div></li>


                <li class="nav-item" th:if="${session.loginUser==null}"><div class="nav-link"><a href="http://localhost:9100/login" class="navbar-brand text-light"><i class="bi bi-person"></i>登陆</a></div></li>
                <li class="nav-item" th:if="${session.loginUser==null}"><div class="nav-link"><a href="http://localhost:9100/register" class="navbar-brand text-light"><i class="bi bi-fingerprint"></i>注册</a></div></li>
                <li class="nav-item" th:if="${session.loginUser==null}"><div class="nav-link"><a href="http://localhost:9100/login" class="navbar-brand text-light"><i class="bi bi-cart"></i>我的游戏库</a></div></li>

                <li class="nav-item"><div class="nav-link"><a href="#" class="navbar-brand text-light"><i class="bi bi-phone-vibrate"></i>关于我们</a></div></li>
            </ul>
        </div>
    </div>
</nav>
<section class="bg-black" >
    <div class="container">
        <h1 class="font-weight-bold title text-light"><a href="http://localhost:9300"  class="navbar-brand">火游游戏商城</a></h1>
        <div class="row">
            <nav class="navbar navbar-expand-lg navbar-black bg-black pl-2 pr-2">
                <button class="navbar-black navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExplore" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse " id="navbarsExplore">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link text-light" href="http://localhost:9300">首页</a>
                        </li>
                        <li class="nav-item text-white" th:each="category:${categorys}">
                            <a class="nav-link text-light" th:href="'http://localhost:9300/category/gameList/'+${category.getCatId()}" th:text="${category.catName}"></a>
                        </li>
<!--                        <li class="nav-item text-white">-->
<!--                            <a class="nav-link" href="#">Home</a>-->
<!--                        </li>-->
<!--                        <li class="nav-item text-white">-->
<!--                            <a class="nav-link" href="#">Travel</a>-->
<!--                        </li>-->
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item"><div class="nav-link"><img style="width:80px;height:80px" src="https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/16340863108760984.jpg"></div></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</section>


<!-- https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/444a0bff4090f3651d126deb051c96a.jpg -->

<!-- 轮播图 -->
<section class="bg-black" style="padding-bottom: 50px;" >
    <div class="container">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" >
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
            </div>
            <div class="carousel-inner" style="width: 1300px;height:500px;">
                <div class="carousel-item active" >
                    <img  src="image/b1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="image/b2.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="image/b3.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="image/b4.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="image/b5.jpg" class="d-block w-100" alt="...">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</section>







<!--<section class="bg-black" style="padding-bottom: 50px;" >-->
<!--    <div class="container">-->
<!--        <div id="pp1">-->
<!--            <div id="pp2">-->
<!--                <img class="banner" src="image/b1.jpg"/>-->
<!--                <img class="banner" src="image/b2.jpeg"/>-->
<!--                <img class="banner" src="image/b3.jpeg"/>-->
<!--                <img class="banner" src="image/b4.jpeg"/>-->
<!--                <img class="banner" src="image/b5.jpg"/>-->
<!--            </div>-->
<!--        </div>-->
<!--</section>-->
<section class="p-3">
    <div class="container">
        <h2 class="text-center">热门游戏推荐</h2>

        <div class="row g-4" >
            <div class="col-md-6 col-lg-3" th:each="hotgame:${hotgames}" >
                <a style="text-decoration:none" th:href="'http://localhost:9300/game/gamedetail/'+${hotgame.gameId}"><div class="card bg-dark">
                    <div class="cardbody text-center" style="height: 230px">
                        <img  style="width: 250px;height:100px" th:src="${hotgame.gameDefaultImg}"
                              class="mb-3 "/>
                        <h3 class="card-title text-light" th:text="${hotgame.gameName}"> </h3>
                        <p class="card-text text-light"th:text="${hotgame.gameTitle}">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, itaque accusamus velit sed aspernatur aut nobis quibusdam.</p>
                    </div>
                </div>
                </a>
            </div>

<!--            <div class="col-md-6 col-lg-3">-->
<!--                <div class="card bg-dark">-->
<!--                    <div class="cardbody text-center">-->
<!--                        <img  style="width: 250px;height:100px" src="https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/16340863108760984.jpg"-->
<!--                              class="mb-3 "/>-->
<!--                        <h3 class="card-title text-light"> steam</h3>-->
<!--                        <p class="card-text text-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, itaque accusamus velit sed aspernatur aut nobis quibusdam.</p>-->
<!--                    </div>-->
<!--                </div>-->

<!--            </div>-->
<!--            <div class="col-md-6 col-lg-3">-->
<!--                <div class="card bg-dark">-->
<!--                    <div class="cardbody text-center">-->
<!--                        <img  style="width: 250px;height:100px" src="https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/16340863108760984.jpg"-->
<!--                              class="mb-3 "/>-->
<!--                        <h3 class="card-title text-light"> steam</h3>-->
<!--                        <p class="card-text text-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, itaque accusamus velit sed aspernatur aut nobis quibusdam.</p>-->
<!--                    </div>-->
<!--                </div>-->

<!--            </div>-->
<!--            <div class="col-md-6 col-lg-3">-->
<!--                <div class="card bg-dark">-->
<!--                    <div class="cardbody text-center">-->
<!--                        <img  style="width: 250px;height:100px" src="https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/16340863108760984.jpg"-->
<!--                              class="mb-3 "/>-->
<!--                        <h3 class="card-title text-light"> steam</h3>-->
<!--                        <p class="card-text text-light">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, itaque accusamus velit sed aspernatur aut nobis quibusdam.</p>-->
<!--                    </div>-->
<!--                </div>-->

<!--            </div>-->





        </div>
    </div>

</section>
<section class="p-4">
    <div class="container">
        <h2 class="text-center">其他游戏平台推荐</h2>
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="card bg-dark">
                    <div class="cardbody text-center">
                        <a style="text-decoration: none;" href="http://steam.szbinkj.cn/down/steam12?channel=360gh09sh&plan=steam">
                        <img style="width: 100px;height:100px" src="image/steam.jpeg"
                             class="mb-3 rounded-circle"/>
                        <h3 class="card-title text-light">
                            steam
                        </h3></a>
                    </div>
                </div>

            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card bg-dark">
                    <div class="cardbody text-center">
                        <a style="text-decoration: none;" href="http://origin.shyihuog.cn/origin?channel=360thy12&plan=origin&unit=origin-za&kw=%E4%B8%AD%E5%9B%BDorigin">
                        <img style="width: 100px;height:100px" src="image/32.jpg"
                             class="mb-3 rounded-circle"/>
                        <h3 class="card-title text-light">
                            origin
                        </h3></a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card bg-dark">
                    <div class="cardbody text-center">
                        <a style="text-decoration: none;" href="https://www.nintendo.tw/hardware/switch/feature/">
                        <img style="width: 100px;height:100px" src="image/nx.jpeg"
                             class="mb-3 rounded-circle"/>
                        <h3 class="card-title text-light">
                           NS
                        </h3>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="card bg-dark">
                    <div class="cardbody text-center">
                        <a style="text-decoration: none;" href="https://www.xbox.com/zh-CN/windows-10">
                        <img style="width: 100px;height:100px" src="image/3.jpeg"
                             class="mb-3 rounded-circle"/>
                        <h3 class="card-title text-light">
                            xbox
                        </h3>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>


</section>


<!-- 脚部信息 -->

<section class="p-4">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
        <path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
        </svg>
    <footer class="bg-black pb-5">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md mr-4">
                    <i class="fas fa-copyright text-white"></i>
                    <small class="d-block mt-3 text-muted">©
                        <script>document.write(new Date().getFullYear())</script>
                        邮箱:<a target="_blank" href="#">384323898@qq.com</a>.
                    </small>
                </div>

                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">玩家交流</h5>
                    <ul class="list-unstyled text-small">
                        <li><img style="width: 200px;height: 200px;" src="https://edu-cbw-1.oss-cn-guangzhou.aliyuncs.com/444a0bff4090f3651d126deb051c96a.jpg" alt=""></li>

                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">加入我们</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">发行商入驻</a></li>
                        <li><a class="text-muted" href="#">分销联盟</a></li>
                        <li><a class="text-muted" href="#">KOL合作</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">客户中心</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">在线时间：09:00-21:00</a></li>
                        <li><a class="text-muted" href="#">电话客服：18520413815</a></li>
                        <li><a class="text-muted" href="#">QQ客服：384323898</a></li>
                        <li><a class="text-muted" href="#">微信客服：18520413815</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h5 class="mb-4 text-white">关于</h5>
                    <ul class="list-unstyled text-small">
                        <li><a class="text-muted" href="#">关于火游</a></li>
                        <li><a class="text-muted" href="#">服务条款</a></li>
                        <li><a class="text-muted" href="#">售后服务</a></li>
                        <li><a class="text-muted" href="#">客服中心</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</section>
<!-- ---------------------------------------- -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</body>
</html>

